<template>
  <div class="">
    <group class="mine-group">
      <x-input class="required" title="姓名" v-model="information.name" label-width="80px" placeholder="请输入您的姓名"></x-input>
      <div class="usi-group weui-cell required">
        <div class="label weui-label" style="line-height: 22px;">性别</div>
        <div class="radio-group" v-for="(item, idx) in genderList" :key="idx">
          <div class="radio-item" @click="genderChang(idx)">
            <div class="radio-room">
              <span class="radio-dot" :class="[{'i-checked': item.checked}]"></span>
            </div>
            <div class="radio-txt">{{item.txt}}</div>
          </div>
        </div>
      </div>
      <div class="usi-group weui-cell required">
        <div class="label weui-label" style="line-height: 22px;">民族</div>
        <div class="radio-group" v-for="(item, idx) in nationList" :key="idx">
          <div class="radio-item" @click="nationChang(item)">
            <div class="radio-room">
              <span class="radio-dot" :class="[{'i-checked': item.checked}]"></span>
            </div>
            <div class="radio-txt">{{item.txt}}</div>
          </div>
        </div>
      </div>
      <div class="usi-group weui-cell required">
        <div class="label weui-label" style="line-height: 22px;">年级</div>
        <div class="radio-group" v-for="(item, idx) in gradeList" :key="idx">
          <div class="radio-item" @click="gradeChang(idx)">
            <div class="radio-room">
              <span class="radio-dot" :class="[{'i-checked': item.checked}]"></span>
            </div>
            <div class="radio-txt">{{item.txt}}</div>
          </div>
        </div>
      </div>
      <x-input title="身份证号" class="required" v-model="information.idCard" type="tel" label-width="80px" placeholder="请输入您的省份证号" v-if="redirectName == 'goodsPay'"></x-input>
      <x-input class="required" :max=11 title="手机号码" v-model="information.mailPhone" type="tel" label-width="80px" placeholder="请输入您的手机号码"></x-input>
      <popup-picker title="所在地区" :data="addrList" class="picker-label required" value-text-align="left" :columns="3" v-model="addr" ref="addrPicker" placeholder="请选择所在地区" @on-change="addrChange"></popup-picker>
      <!-- <x-input title="所在班级" class="required" v-model="information.className" label-width="80px" placeholder="请输入您所在的班级"></x-input> -->
      <popup-picker ref="highschool" title="所在学校" :data="highschoolList" class="picker-label required" value-text-align="left" v-model="highschool" @on-show="onSchoolShow" @on-change="onSchoolChange" placeholder="请选择学校"></popup-picker>
      <x-input class="required" title="学校" v-model="information.highschool" label-width="80px" placeholder="请输入您的学校名称" v-if="otherSchool"></x-input>
      <x-address title="邮寄地区" v-model="addr2" class="picker-label required" :list="addressData" value-text-align="left" placeholder="请选择地址" v-if="redirectName == 'goodsPay'" @on-hide="addr2Change"></x-address>
      <x-input title="详细地址" class="required" v-model="information.address" label-width="80px" placeholder="请输入详细地址" v-if="redirectName == 'goodsPay'"></x-input>
      <!-- <x-input title="QQ号" v-model="information.qq" type="tel" label-width="80px" v-if="redirectName != 'goodsPay'" placeholder="请输入您的QQ号码（选填）"></x-input> -->
    </group>
    <div class="reg-tip">注：请务必填写您的真实信息！</div>
    <div class="btn-next-group">
      <a href="javascript:;" class="btn-next" @click="saveUserInfo()">保存</a>
    </div>

  </div>
</template>

<script>
import Api from '@/api/index.js'
import Utils from '@/common/utils.js'
import { Group, PopupPicker, Radio, XAddress, XInput, Value2nameFilter as value2name } from 'vux'
import chinaAddr from '../../assets/data/chinaAddr.js';
export default {
  components: {
    Group,
    PopupPicker,
    Radio,
    XAddress,
    XInput
  },
  data() {
    return {
      information: {
        name: '',
        sex: 1,
        qq: '',
        highschool: '',
        studentClass: 1,
        nation: 1,
        mailPhone: '',
        provinceId: 34,
        cityId: null,
        districtId: null,
        className: "",
        schoolId: null,
        idCard: null,
        mailProvinceId: null,
        mailCityId: null,
        mailDistrictId: null,
        address: null,
        mailProvince: null,
        mailCity: null,
        mailDistrict: null
      },
      genderList: [
        { name: 1, txt: '男', checked: false },
        { name: 0, txt: '女', checked: false }
      ],
      nationList: [
        { name: 1, txt: '汉族', checked: true },
        { name: 2, txt: '少数民族', checked: false }
      ],
      gradeList: [
        { name: 1, txt: '高一', checked: false },
        { name: 2, txt: '高二', checked: false },
        { name: 3, txt: '高三', checked: false }
      ],
      addr: [],
      addrList: [
        { 'name': '浙江', 'value': '浙江', 'parent': 0 },
        { 'id': 345, 'name': '杭州市', 'value': '杭州市', 'parent': '浙江' },
        { 'id': 346, 'name': '宁波市', 'value': '宁波市', 'parent': '浙江' },
        { 'id': 347, 'name': '温州市', 'value': '温州市', 'parent': '浙江' },
        { 'id': 348, 'name': '嘉兴市', 'value': '嘉兴市', 'parent': '浙江' },
        { 'id': 349, 'name': '湖州市', 'value': '湖州市', 'parent': '浙江' },
        { 'id': 350, 'name': '绍兴市', 'value': '绍兴市', 'parent': '浙江' },
        { 'id': 351, 'name': '金华市', 'value': '金华市', 'parent': '浙江' },
        { 'id': 352, 'name': '衢州市', 'value': '衢州市', 'parent': '浙江' },
        { 'id': 353, 'name': '舟山市', 'value': '舟山市', 'parent': '浙江' },
        { 'id': 354, 'name': '台州市', 'value': '台州市', 'parent': '浙江' },
        { 'id': 355, 'name': '丽水市', 'value': '丽水市', 'parent': '浙江' },
        { 'id': 2866, 'name': '上城区', 'value': '上城区', 'parent': '杭州市' },
        { 'id': 2867, 'name': '下城区', 'value': '下城区', 'parent': '杭州市' },
        { 'id': 2868, 'name': '江干区', 'value': '江干区', 'parent': '杭州市' },
        { 'id': 2869, 'name': '拱墅区', 'value': '拱墅区', 'parent': '杭州市' },
        { 'id': 2870, 'name': '西湖区', 'value': '西湖区', 'parent': '杭州市' },
        { 'id': 2871, 'name': '滨江区', 'value': '滨江区', 'parent': '杭州市' },
        { 'id': 2872, 'name': '萧山区', 'value': '萧山区', 'parent': '杭州市' },
        { 'id': 2873, 'name': '余杭区', 'value': '余杭区', 'parent': '杭州市' },
        { 'id': 2874, 'name': '桐庐县', 'value': '桐庐县', 'parent': '杭州市' },
        { 'id': 2875, 'name': '淳安县', 'value': '淳安县', 'parent': '杭州市' },
        { 'id': 2876, 'name': '建德市', 'value': '建德市', 'parent': '杭州市' },
        { 'id': 2877, 'name': '富阳市', 'value': '富阳市', 'parent': '杭州市' },
        { 'id': 2878, 'name': '临安市', 'value': '临安市', 'parent': '杭州市' },
        { 'id': 2879, 'name': '海曙区', 'value': '海曙区', 'parent': '宁波市' },
        { 'id': 2880, 'name': '江东区', 'value': '江东区', 'parent': '宁波市' },
        { 'id': 2881, 'name': '江北区', 'value': '江北区', 'parent': '宁波市' },
        { 'id': 2882, 'name': '北仑区', 'value': '北仑区', 'parent': '宁波市' },
        { 'id': 2883, 'name': '镇海区', 'value': '镇海区', 'parent': '宁波市' },
        { 'id': 2884, 'name': '鄞州区', 'value': '鄞州区', 'parent': '宁波市' },
        { 'id': 2885, 'name': '象山县', 'value': '象山县', 'parent': '宁波市' },
        { 'id': 2886, 'name': '宁海县', 'value': '宁海县', 'parent': '宁波市' },
        { 'id': 2887, 'name': '余姚市', 'value': '余姚市', 'parent': '宁波市' },
        { 'id': 2888, 'name': '慈溪市', 'value': '慈溪市', 'parent': '宁波市' },
        { 'id': 2889, 'name': '奉化市', 'value': '奉化市', 'parent': '宁波市' },
        { 'id': 2890, 'name': '鹿城区', 'value': '鹿城区', 'parent': '温州市' },
        { 'id': 2891, 'name': '龙湾区', 'value': '龙湾区', 'parent': '温州市' },
        { 'id': 2892, 'name': '瓯海区', 'value': '瓯海区', 'parent': '温州市' },
        { 'id': 2893, 'name': '洞头县', 'value': '洞头县', 'parent': '温州市' },
        { 'id': 2894, 'name': '永嘉县', 'value': '永嘉县', 'parent': '温州市' },
        { 'id': 2895, 'name': '平阳县', 'value': '平阳县', 'parent': '温州市' },
        { 'id': 2896, 'name': '苍南县', 'value': '苍南县', 'parent': '温州市' },
        { 'id': 2897, 'name': '文成县', 'value': '文成县', 'parent': '温州市' },
        { 'id': 2898, 'name': '泰顺县', 'value': '泰顺县', 'parent': '温州市' },
        { 'id': 2899, 'name': '瑞安市', 'value': '瑞安市', 'parent': '温州市' },
        { 'id': 2900, 'name': '乐清市', 'value': '乐清市', 'parent': '温州市' },
        { 'id': 2901, 'name': '南湖区', 'value': '南湖区', 'parent': '嘉兴市' },
        { 'id': 2902, 'name': '秀洲区', 'value': '秀洲区', 'parent': '嘉兴市' },
        { 'id': 2903, 'name': '嘉善县', 'value': '嘉善县', 'parent': '嘉兴市' },
        { 'id': 2904, 'name': '海盐县', 'value': '海盐县', 'parent': '嘉兴市' },
        { 'id': 2905, 'name': '海宁市', 'value': '海宁市', 'parent': '嘉兴市' },
        { 'id': 2906, 'name': '平湖市', 'value': '平湖市', 'parent': '嘉兴市' },
        { 'id': 2907, 'name': '桐乡市', 'value': '桐乡市', 'parent': '嘉兴市' },
        { 'id': 2908, 'name': '吴兴区', 'value': '吴兴区', 'parent': '湖州市' },
        { 'id': 2909, 'name': '南浔区', 'value': '南浔区', 'parent': '湖州市' },
        { 'id': 2910, 'name': '德清县', 'value': '德清县', 'parent': '湖州市' },
        { 'id': 2911, 'name': '长兴县', 'value': '长兴县', 'parent': '湖州市' },
        { 'id': 2912, 'name': '安吉县', 'value': '安吉县', 'parent': '湖州市' },
        { 'id': 2913, 'name': '越城区', 'value': '越城区', 'parent': '绍兴市' },
        { 'id': 2914, 'name': '绍兴县', 'value': '绍兴县', 'parent': '绍兴市' },
        { 'id': 2915, 'name': '新昌县', 'value': '新昌县', 'parent': '绍兴市' },
        { 'id': 2916, 'name': '诸暨市', 'value': '诸暨市', 'parent': '绍兴市' },
        { 'id': 2917, 'name': '上虞市', 'value': '上虞市', 'parent': '绍兴市' },
        { 'id': 2918, 'name': '嵊州市', 'value': '嵊州市', 'parent': '绍兴市' },
        { 'id': 2919, 'name': '婺城区', 'value': '婺城区', 'parent': '金华市' },
        { 'id': 2920, 'name': '金东区', 'value': '金东区', 'parent': '金华市' },
        { 'id': 2921, 'name': '武义县', 'value': '武义县', 'parent': '金华市' },
        { 'id': 2922, 'name': '浦江县', 'value': '浦江县', 'parent': '金华市' },
        { 'id': 2923, 'name': '磐安县', 'value': '磐安县', 'parent': '金华市' },
        { 'id': 2924, 'name': '兰溪市', 'value': '兰溪市', 'parent': '金华市' },
        { 'id': 2925, 'name': '义乌市', 'value': '义乌市', 'parent': '金华市' },
        { 'id': 2926, 'name': '东阳市', 'value': '东阳市', 'parent': '金华市' },
        { 'id': 2927, 'name': '永康市', 'value': '永康市', 'parent': '金华市' },
        { 'id': 2928, 'name': '柯城区', 'value': '柯城区', 'parent': '衢州市' },
        { 'id': 2929, 'name': '衢江区', 'value': '衢江区', 'parent': '衢州市' },
        { 'id': 2930, 'name': '常山县', 'value': '常山县', 'parent': '衢州市' },
        { 'id': 2931, 'name': '开化县', 'value': '开化县', 'parent': '衢州市' },
        { 'id': 2932, 'name': '龙游县', 'value': '龙游县', 'parent': '衢州市' },
        { 'id': 2933, 'name': '江山市', 'value': '江山市', 'parent': '衢州市' },
        { 'id': 2934, 'name': '定海区', 'value': '定海区', 'parent': '舟山市' },
        { 'id': 2935, 'name': '普陀区', 'value': '普陀区', 'parent': '舟山市' },
        { 'id': 2936, 'name': '岱山县', 'value': '岱山县', 'parent': '舟山市' },
        { 'id': 2937, 'name': '嵊泗县', 'value': '嵊泗县', 'parent': '舟山市' },
        { 'id': 2938, 'name': '椒江区', 'value': '椒江区', 'parent': '台州市' },
        { 'id': 2939, 'name': '黄岩区', 'value': '黄岩区', 'parent': '台州市' },
        { 'id': 2940, 'name': '路桥区', 'value': '路桥区', 'parent': '台州市' },
        { 'id': 2941, 'name': '玉环县', 'value': '玉环县', 'parent': '台州市' },
        { 'id': 2942, 'name': '三门县', 'value': '三门县', 'parent': '台州市' },
        { 'id': 2943, 'name': '天台县', 'value': '天台县', 'parent': '台州市' },
        { 'id': 2944, 'name': '仙居县', 'value': '仙居县', 'parent': '台州市' },
        { 'id': 2945, 'name': '温岭市', 'value': '温岭市', 'parent': '台州市' },
        { 'id': 2946, 'name': '临海市', 'value': '临海市', 'parent': '台州市' },
        { 'id': 2947, 'name': '莲都区', 'value': '莲都区', 'parent': '丽水市' },
        { 'id': 2948, 'name': '青田县', 'value': '青田县', 'parent': '丽水市' },
        { 'id': 2949, 'name': '缙云县', 'value': '缙云县', 'parent': '丽水市' },
        { 'id': 2950, 'name': '遂昌县', 'value': '遂昌县', 'parent': '丽水市' },
        { 'id': 2951, 'name': '松阳县', 'value': '松阳县', 'parent': '丽水市' },
        { 'id': 2952, 'name': '云和县', 'value': '云和县', 'parent': '丽水市' },
        { 'id': 2953, 'name': '庆元县', 'value': '庆元县', 'parent': '丽水市' },
        { 'id': 2954, 'name': '景宁畲族自治县', 'value': '景宁畲族自治县', 'parent': '丽水市' },
        { 'id': 2955, 'name': '龙泉市', 'value': '龙泉市', 'parent': '丽水市' }
      ],
      otherSchool: false,
      highschool: [],
      highschoolList: [],
      redirectName: 'mineIndex',
      addr2: [],
      addressData: chinaAddr.areaData
    }
  },
  created() {
    // 显示loading
    this.$vux.loading.show({
      text: '加载中...'
    })
    this.getUserData()
    if (this.$route.query && this.$route.query.n) {
      this.redirectName = this.$route.query.n
    }
  },
  methods: {
    // 获取用户信息
    nationChang(item) {
      this.nationList.filter(v => { return v.txt != item.txt }).forEach(v => { v.checked = false });
      item.checked = !item.checked;
      this.information.nation = item.name;
    },
    getUserData() {
      Api.getUserInfo().then(res => {
        Utils.local('userData', res.data)
        let userData = res.data
        let _gender = null
        let _grade = null
        let _idx = 0
        if (userData) {
          this.information.sex = userData.sex === 2 ? 1 : userData.sex
          if (userData.sex === 2 || userData.sex === 1) {
            _idx = 0
            _gender = this.genderList[_idx]
          } else {
            _idx = 1
            _gender = this.genderList[_idx]
          }
          _gender.checked = true
          this.$set(this.genderList, _idx, _gender)
          this.information.sex = _gender.name
          _idx = userData.studentClass ? userData.studentClass - 1 : 0
          _grade = this.gradeList[_idx]
          _grade.checked = true
          this.$set(this.gradeList, _idx, _grade)
          this.information.studentClass = _grade.name
          this.information.mailPhone = userData.mailPhone ? userData.mailPhone : userData.phone
          this.information.name = userData.name ? userData.name : ''
          this.information.qq = userData.qq ? userData.qq : ''
          this.information.provinceId = userData.provinceId ? userData.provinceId : 34
          this.information.cityId = userData.cityId ? userData.cityId : ''
          this.information.districtId = userData.districtId ? userData.districtId : ''
          this.information.highschool = userData.highschool ? userData.highschool : ''
          this.information.schoolId = userData.schoolId ? userData.schoolId : ''
          this.information.className = userData.className || "";
          if (userData.districtId) {
            this.addr.push('浙江')
            this.addrList.map((item, idx) => {
              if (item.id === userData.cityId) {
                this.addr.push(item.name)
              }
              if (item.id === userData.districtId) {
                this.addr.push(item.name)
              }
            })
            this.getHeightSchoolList(userData.districtId, userData.highschool)
          }
          if (userData.highschool) {
            this.otherSchool = true;
            setTimeout(() => {
              this.highschool = ['其他学校']
            }, 200);
          }
        } else {
          _gender = this.genderList[_idx]
          _gender.checked = true
          this.$set(this.genderList, _idx, _gender)
          this.information.sex = _gender.name
          _grade = this.gradeList[_idx]
          _grade.checked = true
          this.$set(this.gradeList, _idx, _grade)
          this.information.studentClass = _gender.name
        }
        // 隐藏loading
        this.$vux.loading.hide()
      })
    },
    // 保存用户信息
    saveUserInfo() {
      let info = this.information
      // 如果schoolId是-1时，删除他
      if (info.schoolId === -1) {
        delete info.schoolId
      } else {
        delete info.highschool
      }
      if (!/^[\u4e00-\u9fa5]+$/.test(this.information.name)) {
        this.$vux.toast.show({
          text: '请输入中文姓名',
          type: 'text',
          width: '80%'
        })
        return
      }

      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.information.mailPhone)) {
        this.$vux.toast.show({
          text: '您输入的手机号格试有误',
          type: 'text',
          width: '80%'
        })
        return
      }
      if (!info.name || info.sex === 2 || !info.mailPhone || !info.districtId) {
        this.$vux.toast.show({
          text: '您填写的内容有误，请重新确认',
          type: 'text',
          width: '80%'
        })
        return
      }
      if (this.redirectName == 'goodsPay') {
        if (info.idCard.length < 16 || !this.addr2 || !info.address) {
          this.$vux.toast.show({
            text: '您填写的内容有误，请重新确认',
            type: 'text',
            width: '80%'
          })
        }

        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.information.idCard)) {
          this.$vux.toast.show({
            text: '您输入的身份证格试有误',
            type: 'text',
            width: '80%'
          })
          return
        }
      }

      if (info.schoolId && info.schoolId != -1) {
        if (!info.schoolId) {
          this.$vux.toast.show({
            text: '请选择学校',
            type: 'text',
            width: '80%'
          })
          return
        }
      }

      if (info.schoolId == -1) {
        if (!info.highschool) {
          this.$vux.toast.show({
            text: '请输入学校',
            type: 'text',
            width: '80%'
          })
          return
        }
      }

      let that = this;
      if (info.highschool) {
        info.schoolId = '';
      } else {
        info.highschool = "";
      }
      Api.saveUserinfo(info).then(res => {
        if (res.code === 20000) {
          Utils.local('userData', res.data)
          Utils.local('accesstoken', res.data.accesstoken)
          this.$vux.toast.show({
            text: '保存个人信息成功',
            type: 'text',
            width: '80%'
          })
          Api.checkNingBoUser().then(check => {
            if (check.code == 20000) {
              if (check.message == 0) {
                this.$vux.alert.show({
                  content: `您的手机号码非联通号码，需购买vip套餐`,
                  buttonText: '确定',
                  maskZIndex: 100,
                  onHide() {
                    that.$router.push({ name: 'goodsPay' });
                  }
                })
              }
            }
          });
          if (this.redirectName === 'goodsPay') {
            this.$router.push({ name: this.redirectName, query: { t: 'woo' } })
          } else {
            this.$router.push({ name: this.redirectName })
          }
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'text',
            width: '80%'
          })
        }
      })
    },
    // 性别选择
    genderChang(idx) {
      let _gender = this.genderList[idx]
      this.genderList.map((item, i) => {
        let _item = item
        _item.checked = false
        this.$set(this.genderList, i, _item)
      })
      _gender.checked = true
      this.$set(this.genderList, idx, _gender)
      this.information.sex = _gender.name
    },
    // 年级选择
    gradeChang(idx) {
      let _grade = this.gradeList[idx]
      this.gradeList.map((item, i) => {
        let _item = item
        _item.checked = false
        this.$set(this.gradeList, i, _item)
      })
      _grade.checked = true
      this.$set(this.gradeList, idx, _grade)
      this.information.studentClass = _grade.name
    },
    // 选择地区
    addrChange(value) {
      let that = this
      that.addrList.map((item, idx) => {
        if (item.name === that.addr[1]) {
          that.information.cityId = item.id
        }
        if (item.name === that.addr[2]) {
          that.information.districtId = item.id
        }
      })
      console.log(that.information.districtId)
      that.getHeightSchoolList(that.information.districtId, this.information.highschool)
    },
    // 选择学校地区
    addr2Change() {
      this.information.mailProvinceId = this.addr2[0].split('_')[1]
      this.information.mailCityId = this.addr2[1].split('_')[1]
      this.information.mailDistrictId = this.addr2[2].split('_')[1]
      let _addr = value2name(this.addr2, chinaAddr.areaData).split(' ')
      this.information.mailProvince = _addr[0]
      this.information.mailCity = _addr[1]
      this.information.mailDistrict = _addr[2]
    },
    // 获取学校列表
    getHeightSchoolList(districtId, school) {
      Api.getHeightSchool({ districtId: districtId }).then(res => {
        if (res.code === 20000) {
          this.hsList = res.data.array
          let _hsList = []
          this.highschool = [];
          this.hsList.forEach(item => {
            _hsList.push(item.name);
            if (item.id == this.information.schoolId) {
              this.highschool.push(item.name)
            }
          })

          _hsList.push('其他学校')
          this.highschoolList = []
          this.highschoolList.push(_hsList)
          if (school) {
            this.otherSchool = true
            this.highschool = ['其他学校']
          } else {
            this.otherSchool = false
          }
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'text',
            width: '80%'
          })
        }
      })
    },
    // 判断是否选择学校的区域，未选择给出提示
    onSchoolShow() {
      if (!this.information.districtId) {
        this.$refs.highschool.onHide(false)
        this.$vux.toast.show({
          text: '请先选择所在区域',
          type: 'text',
          width: '80%'
        })
      }
    },
    // 选择学校
    onSchoolChange() {
      if (this.highschool[0] === '其他学校') {
        this.otherSchool = true
        this.information.schoolId = -1
      } else {
        this.hsList.map(item => {
          this.otherSchool = false
          if (item.name === this.highschool[0]) {
            this.information.schoolId = item.id
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.mine-group {
  .weui-cells {
    margin-top: 0;
  }
}
.usi-group {
  .weui-cells {
    margin-top: 0 !important;
  }
  .vux-popup-picker-select {
    // padding-left: .64rem;
    text-align: left !important;
    .vux-popup-picker-value {
      color: #000;
      position: relative;
      padding-right: 0.4rem;
    }
  }
  .weui-cell_access {
    .weui-cell__ft {
      display: none;
    }
  }
  .vux-popup-picker-placeholder {
    color: #777;
  }
}
.bonus-wrap {
  .weui-cell__bd {
    p {
      margin: 0;
    }
  }
  .weui-cell__ft {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding-left: 0 !important;
    .weui-icon-checked::before {
      color: #ff8600 !important;
    }
  }
}
.picker-label {
  .weui-cell__hd {
    width: 80px;
  }
  .vux-popup-picker-value {
    color: #000;
  }
}
.required {
  .weui-label {
    position: relative;
    padding-left: 0.266667rem /* 10/37.5 */;
    &:before {
      content: "*";
      color: #f00;
      position: absolute;
      left: 0;
      top: 0.053333rem /* 2/37.5 */;
    }
  }
}
</style>

<style lang="scss" scoped>
.usi-group {
  .label {
    width: 2.133333rem /* 80/37.5 */;
  }
  .radio-group {
    display: inline-block;
    .radio-item {
      margin-right: 0.4rem;
      &::last-child {
        margin-right: 0;
      }
      .radio-room {
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: relative;
        vertical-align: middle;
        .i-checked::before {
          content: "";
          display: block;
          width: 0.32rem /* 12/37.5 */;
          height: 0.32rem /* 12/37.5 */;
          background-color: #00d47d;
          border-radius: 50%;
          position: absolute;
          left: calc((100% - 0.32rem) / 2);
          top: calc((100% - 0.32rem) / 2);
        }
      }
      .radio-txt {
        display: inline-block;
        margin-left: 0.16rem;
        line-height: 22px;
        vertical-align: middle;
      }
    }
  }
}
.reg-tip {
  padding: 0.266667rem 0.4rem;
  color: #f00;
  font-size: 13px;
  text-align: justify;
}
</style>

